<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* body为公共样式 */
			body {
				font-weight: bold;
				font-size: 24px;
				/* text-align: center; */
				
			}

			.box {
				width: 400px;
				height: 200px;
				border: 1px solid red;

				/* 第一种方式 */
				/* line-height: 200px; */
				
				/* 第二种方式 */
				display: table-cell;
				vertical-align: middle;
			}

			/* 这是第三种方式的css */
			.box2 {
				width: 400px;
				height: 200px;
				border: 2px solid pink;
				margin-top: 100px;
				display: table;
			}
			.text {
				display: table-cell;
				vertical-align: middle;
				border: 1px solid purple;
				backgroung: #e3e3e3;
			}
			/* 这是第四种方式的css */
			.box3 {
				width: 400px;
				height: 200px;
				margin-top: 100px;
				border: 1px solid purple;
				position: relative;
			}
			.content {
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
			}
			
			
			.box4{
				text-align: center;
				width: 400px;
				height: 200px;
				border: 2px solid red;
				line-height: 200px;
			}
			.what{
				color: red;
				border: 1px solid pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- <span class="span">21123123</span> -->
			这是将要居中的文字
		</div>

		<!-- 第三种方法的html -->
		<div class="box2">
			<p class="text">这是将要居中的文字</p>
		</div>

		<!-- 这是第四种方式的html -->
		<div class="box3">
			<div class="content">这是将要居中的文字</div>
		</div>
		<div class="box4">
			<span>这是居中的span标签</span>
		</div>
		<aside class="what">你好这是什么标签</aside>
	</body>
</html>
